﻿<template>
  <div class="residents-container">
    <el-dialog
      v-model="dialogObj.isDialogVisible"
      :title="dialogObj.editResidentsTitle"
      top="5vh"
      height="70vh"
      lock-scroll
      :width="1300"
      draggable
      class="res-add"
      @close="handleClose"
      @open="handleOpen"
    >
      <div class="res-add-content">
        <!-- :visible.sync="visible" -->
        <!-- 基本信息 -->
        <el-form
          :model="ruleForm"
          ref="ruleFormRef"
          size="large"
          class="editForm"
          label-width="170px"
          :rules="rules"
        >
          <h3 class="ml20" id="part1">基本信息</h3>
          <el-row :gutter="25">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="ruleForm.name"
                 
                  clearable
                  style="width: 250px; height: 32px"
                  :maxlength="20"
                  ref="NameInput"
                  @keydown.enter.native="nextInput('phoneNumberInput')"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="联系电话：" prop="phoneNumber">
                <el-input
                  v-model="ruleForm.phoneNumber"
                  clearable
                  
                  style="width: 250px; height: 32px"
                  ref="phoneNumberInput"
                  @keydown.enter.native="nextInput('carNumberInput')"
                />
              </el-form-item>
            </el-col>
           
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="证件类型：" prop="cardType">
                <el-select
                  v-model="ruleForm.cardType"
                  
                  placeholder="请选择证件类型"
                  style="width: 100%"
                >
                  <el-option label="居民身份证" value="居民身份证"></el-option>
                  <el-option
                    label="港澳台居民身份证"
                    value="港澳台居民身份证"
                  ></el-option>
                  <el-option
                    label="外国人永久居留身份证"
                    value="外国人永久居留身份证"
                  ></el-option>
                  <el-option
                    label="港澳台居民居住证"
                    value="港澳台居民居住证"
                  ></el-option>
                  <el-option label="居民户口本" value="居民户口本"></el-option>
                  <el-option label="护照" value="护照"></el-option>
                  <el-option label="军官证" value="军官证"></el-option>
                  <el-option label="文职干部证" value="文职干部证"></el-option>
                  <el-option label="士兵证" value="士兵证"></el-option>
                  <el-option label="驾驶执照" value="驾驶执照"></el-option>
                  <el-option label="出生证" value="出生证"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                  <el-option label="儿保卡" value="儿保卡"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="证件号码：" prop="cardNumber">
                <el-input
                 
                  v-model="ruleForm.cardNumber"
                  clearable
                  style="width: 250px; height: 32px"
                  ref="carNumberInput"
                  @keydown.enter.native="nextInput('birthdayInput')"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker
                  v-model="ruleForm.birthday"
                  :disabled-date="disableFutureDates"
                 
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 250px; height: 32px"
                  ref="birthdayInput"
                  @keydown.enter.native="nextInput('contactsInput')"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="性别：" prop="gender">
                <el-radio
                  
                  v-model="ruleForm.gender"
                  class="el-radio-n"
                  label="男"
                  value="男"
                  border
                  size="small"
                  >男</el-radio
                >
                <el-radio
                  
                  v-model="ruleForm.gender"
                  class="el-radio-n"
                  label="女"
                  value="女"
                  border
                  size="small"
                  >女</el-radio
                >
              </el-form-item>
            </el-col>
           
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="联系人姓名：" prop="contacts">
                <el-input
                  ref="contactsInput"
                  v-model="ruleForm.contacts"
                  clearable
                
                  style="width: 250px; height: 32px"
                  placeholder="请输入联系人姓名"
                  @keydown.enter.native="nextInput('contactsNumberInput')"
                  maxlength="12"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="联系人电话：" prop="contactsNumber">
                <el-input
                  ref="contactsNumberInput"
                  v-model="ruleForm.contactsNumber"
                  clearable
                  
                  style="width: 250px; height: 32px"
                  placeholder="请输入联系人电话"
                  @keydown.enter.native="nextInput('addressInput')"
                  maxlength="12"
                />
              </el-form-item>
            </el-col>
     
            <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="责任医生：" prop="respDoctor">
                <el-input
                  v-model="ruleForm.respDoctor"
                  clearable
                  style="width: 250px; height: 32px"
                  ref="respDoctorInput"
                  @keydown.enter.native="nextInput('addressInput')"
                />
              </el-form-item>
            </el-col> -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="现住址：" prop="address">
                <el-input
                  v-model="ruleForm.address"
                  placeholder="请输入现住址"
                  clearable
                  style="width: 82.5%; height: 32px"
                  ref="addressInput"
                  @keydown.enter.native="nextInput('heightInput')"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="户籍地址：" prop="domicileAddress">
                <el-input
                  ref="domicileAddressInput"
                  v-model="ruleForm.domicileAddress"
                  clearable
                  style="width: 82.5%; height: 32px"
                  placeholder="请输入户籍地址"
                  @keydown.enter.native="nextInput('heightInput')"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="shell"></div>
        </el-form>

        <!-- 用药情况 -->
        <el-form
          :model="drugValidateForm"
          ref="drugValidateFormRef"
          size="large"
          class="editForm"
          label-width="170px"
          :rules="drugValidateRules"
        >
          <h3 class="ml20" id="part10">用药情况</h3>
          <el-row :gutter="25">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="服药依从性：" prop="medicationAdherence">
                <el-radio-group v-model="drugValidateForm.medicationAdherence">
                  <el-radio
                    label="规律"
                    value="规律"
                    name="medicationAdherence"
                  ></el-radio>
                  <el-radio
                    label="间断"
                    value="间断"
                    name="medicationAdherence"
                  ></el-radio>
                  <el-radio
                    label="不服药"
                    value="不服药"
                    name="medicationAdherence"
                  ></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="25">
            <el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21" class="mb20">
              <el-form-item label="药品">
                <div
                  style="
                    border-bottom: 1px solid #ccc;
                    width: 100%;
                    height: 20px;
                  "
                ></div>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" class="mb20">
              <el-button type="primary" @click="addDrug" size="default"
                >新增</el-button
              >
            </el-col>
          </el-row>
          <el-row
            :gutter="25"
            style="
              padding-right: 12.5px;
              padding-left: 12.5px;
              margin-bottom: 20px;
            "
            v-for="(item, index) in drugValidateForm.medicationList"
            :key="item"
          >
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
              class="mb20 flexBox"
            >
              <el-col :span="6" style="text-align: right; line-height: 32px"
                >药品名称:</el-col
              >
              <el-form-item
                label=""
                :prop="`medicationList.` + index + `.medicationName`"
                :rules="[
                  {
                    required: true,
                    message: '药品名称不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  style="height: 32px; width: 250px"
                  @focus="getShow"
                  v-model="item.medicationName"
                  placeholder="请输入药品名称"
                  :maxlength="100"
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
              class="mb20 flexBox"
            >
              <el-col :span="6" style="text-align: right; line-height: 32px"
                >用药时间:</el-col
              >
              <el-form-item
                :prop="`medicationList.` + index + `.medicationTime`"
                :rules="[
                  {
                    required: true,
                    message: '用药时间不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  style="height: 32px; width: 250px"
                  v-model="item.medicationTime"
                  placeholder="请输入用药时间"
                  :maxlength="10"
                  clearable
                />

                <el-icon class="iconBox" @click.prevent="moveDrug(item)"
                  ><RemoveFilled
                /></el-icon>
              </el-form-item>
            </el-col>
            <!-- <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20 flexBox"
              v-show="tipshow"
            >
              <div class="tip">
                <span>外院或自购药品请在名称后备注(外院)或(自购)</span>
              </div>
            </el-col> -->
            <el-col
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                <el-form-item
                    :prop="`medicationList.` + index + `.medicationType`"
                    label="类型："
                  >
                  <el-radio-group
                      v-model="item.medicationType"
                    >
                      <el-radio
                        label="外院"
                        value="外院"
                        name="medicationType"
                      ></el-radio>
                      <el-radio
                        label="自购"
                        value="自购"
                        name="medicationType"
                      ></el-radio>
                      <el-radio
                        label="本院"
                        value="本院"
                        name="medicationType"
                      ></el-radio>
                    </el-radio-group>
                </el-form-item>
                
                </el-col>
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
              class="mb20 flexBox"
            >
              <el-col :span="6" style="text-align: right; line-height: 32px"
                >频次:</el-col
              >
              <div style="display: flex; width: 100%">
                <el-form-item
                  :prop="`medicationList.` + index + `.frequencyDay`"
                  :rules="[
                    {
                      required: true,
                      message: '用药频次（天）不能为空',
                      trigger: 'blur',
                    },
                    {
                      validator: (rule, value, callback) => {
                        const isNumber = /^\d+$/.test(value);
                        if (!isNumber) {
                          callback(new Error('请输入数字'));
                        } else {
                          callback();
                        }
                      },
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    style="height: 32px; width: 125px"
                    v-model="item.frequencyDay"
                    :maxlength="2"
                    clearable
                  >
                    <template #append>天</template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  :prop="`medicationList.` + index + `.frequencyCount`"
                  :rules="[
                    {
                      required: true,
                      message: '用药频次不能为空',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    style="height: 32px; width: 125px"
                    v-model="item.frequencyCount"
                    :maxlength="2"
                    clearable
                  >
                    <template #append>次</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
              class="mb20 flexBox"
            >
              <el-col :span="6" style="text-align: right; line-height: 32px"
                >每次用量:</el-col
              >
              <div style="display: flex; width: 100%">
                <el-form-item
                  :prop="`medicationList.` + index + `.dosagePerDay`"
                  :rules="[
                    {
                      required: true,
                      message: '每次用量不能为空',
                      trigger: 'blur',
                    },
                    {
                      validator: (rule, value, callback) => {
                        const isNumber = /^\d+(\.\d+)?$/.test(value);
                        if (!isNumber) {
                          callback(new Error('请输入数字'));
                        } else {
                          callback();
                        }
                      },
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    style="height: 32px; width: 125px"
                    v-model="item.dosagePerDay"
                    :maxlength="10"
                    clearable
                  >
                    <template #append>/</template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  :prop="`medicationList.` + index + `.dosagePerCount`"
                  :rules="[
                    {
                      required: true,
                      message: '每次用量不能为空',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    style="height: 32px; width: 125px"
                    v-model="item.dosagePerCount"
                    :maxlength="20"
                    clearable
                  >
                    <template #append>单位</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <div class="shell"></div>
        </el-form>

        <!-- 健康指导 -->
        <el-form
          :model="ruleForm11"
          ref="ruleFormRef11"
          size="large"
          class="editForm"
          label-width="170px"
          :rules="rules11"
          id="healthGuide"
        >
          <el-row :gutter="25">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="录入人：" prop="inputPerson">
                <el-input
                  v-model="ruleForm11.inputPerson"
                  placeholder="请输入录入人"
                  style="width: 250px; height: 32px"
                  clearable
                  disabled
                />
              </el-form-item>
            </el-col>
        
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="体检日期：" prop="exaTime">
                <el-date-picker
                  v-model="ruleForm.exaTime"
                  :disabled-date="disableFutureDates"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 250px; height: 32px"
                  ref="exaTimeDiabetesInput"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="下次年检日期：" prop="nextYearExaTime">
                <el-date-picker
                  disabled
                  v-model="ruleForm11.nextYearExaTime"
                  ref="nextFollowTimeDiabetesInpu"
                  :picker-options="pickerOptions1"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 250px; height: 32px"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="创建日期：" prop="createTime">
                <el-date-picker
                  disabled
                  v-model="ruleForm11.createTime"
                  ref="createTimeInput"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 250px; height: 32px"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="诊疗信息导入日期：" prop="importTime">
                <el-date-picker
                  disabled
                  v-model="ruleForm11.importTime"
                  ref="importTimeInput"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 250px; height: 32px"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="shell"></div>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <span class="button-group">
            <el-button @click="cancel" size="large">取 消</el-button>
            <el-button type="primary" @click="submit" size="large"
              >确 定</el-button
            >
          </span>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="selfCareAssessmentVisible"
      append-to-body
      lock-scroll
      title="老年人生活自理能力评估表"
      top="3vh"
      width="80vw"
    >
      <ElderlySelfCareAssessment
        @update="updateSelfCareAssessment"
        @close="selfCareAssessmentVisible = false"
        :DialogDate="DialogDate"
      />
    </el-dialog>
  </div>
</template>

<script>
import http from "@/utils/request";
import ElderlySelfCareAssessment from "./ElderlySelfCareAssessment.vue";
import { ElMessage } from "element-plus";
import { debounce } from "lodash";
const disableFutureDates = (time) => time > new Date();
export default {
  components: {
    ElderlySelfCareAssessment,
  },
  props: {
    dialogObj: {
      type: Object,
      default: () => ({
        isDialogVisible: false,
        editResidentsTitle: "",
        DialogDate: {},
      }),
    },
  },
  data() {
    const validtrue = (rule, value, callback) => {
      if (value == "" ||!value|| value.length == 0) {
        callback(new Error("此项为必填"));
      } else {
        callback();
      }
    };
    //姓名
    const validname = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入姓名"));
      } else if (!/^[\u4e00-\u9fa5A-Za-z]+$/.test(value)) {
        callback(new Error("请输入正确的姓名"));
      } else {
        callback();
      }
    };
    //性别
    const validsex = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择性别"));
      } else {
        callback();
      }
    };
    //身份证

    const validatorIdCard = (rule, value, callback) => {
      setTimeout(() => {
        //@ts-ignore
        const value2 = this.ruleForm.cardNumber;
        if (value2 == "") {
          callback(new Error("请输入证件号码"));
          //@ts-ignore
        } else if (
          //@ts-ignore
          !/^\d{15}|^\d{17}[a-z]$/i.test(value2) &&
          //@ts-ignore
          this.ruleForm.cardType == "居民身份证"
        ) {
          callback(new Error("请输入正确的证件号码"));
        } else {
          callback();
        }
      }, 200);
    };
    //联系人
    const validateContactName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入联系人名"));
      } else {
        callback();
      }
    };
    //联系人电话
    const validateContactPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入联系人电话"));
      } else {
        callback();
      }
    };
    //户籍地址
    const validateAddressHousehold = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入户籍地址"));
      } else {
        callback();
      }
    };

    //出生日期
    const validatdateOfBirth = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择正确的出生日期"));
      } else {
        callback();
      }
    };
    //联系方式
    const validateMobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入联系方式"));
      }
      // else if (/^\d{11}$|^\d{4}-\d{1,7}$/.test(value)) {
      //   callback();
      // }
      else {
        callback();
      }
    };

    return {
      selfCareAssessmentVisible: false,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      moveWaist: "减腰围(目标        CM)",
      //减体重
      moveWidth: "减体重(目标        KG)",
      addWidth: "增体重(目标        KG)",
      DialogDate: {},
      timeID: null,
      timeDate: "",
      isshow: true,
      tipshow: true,
      // 基本信息
      ruleForm: {
        id: "",
        //姓名
        name: "",
        //身份证
        cardNumber: "",
        //证件类型
        cardType: "",
        //性别
        gender: "",
        //出生日期
        birthday: "",
        //联系方式
        phoneNumber: "",
        //体检日期
        exaTime: "",
        // 责任医生
        respDoctor: "",
        // 年龄
        age: 0,
        //现住址
        address: "",
        //联系人
        contacts: "",
        //联系人电话
        contactsNumber: "",
        //户籍地址
        domicileAddress: "",
      },
      rules: {
        name: [{ required: true, validator: validname, trigger: "blur" }],
        // gender: [{  validator: validsex, trigger: "blur" }],
        cardNumber: [
          { required: true, validator: validatorIdCard, trigger: "blur" },
        ],
        // birthday: [
        //   { required: true, validator: validatdateOfBirth, trigger: "blur" },
        // ],
        // phoneNumber: [
        //   {  validator: validateMobile, trigger: "blur" },
        // ],
        // respDoctor: [{ validator: validtrue, trigger: "blur" }],
        cardType: [{ required: true, validator: validtrue, trigger: "blur" }],
        exaTime: [{ required: true, validator: validtrue, trigger: "blur" }],
        // age: [{  validator: validtrue, trigger: "blur" }],
        // address: [{  validator: validtrue, trigger: "blur" }],
        // contacts: [
        //   { validator: validateContactName, trigger: "blur" },
        // ],
        // contactsNumber: [
        //   {  validator: validateContactPhone, trigger: "blur" },
        // ],
        // domicileAddress: [
        //   {
        //     validator: validateAddressHousehold,
        //     trigger: "blur",
        //   },
        // ],
      },

      //用药情况
      drugValidateForm: {
        medicationList: [],
        //服药依从性
        medicationAdherence: "规律",
        //药品
      },
      drugValidateRules: {
        medicationAdherence: [
          {
            required: true,
            validator: validtrue,
            trigger: "blur",
          },
        ],
      },

      //健康指导
      ruleForm11: {
        nextYearExaTime: "",
        //  下次年检日期
        inputPerson: "",
        //录入人
        createTime: "",
        // 创建时间
        importTime: "",
        //诊疗信息导入日期
      },
    };
  },

  methods: {
    disableFutureDates,
    //回车跳转
    nextInput(key) {
      if (this.$refs[key]) {
        this.$nextTick(() => {
          this.$refs[key].focus();
        });
      }
    },
    setBoxShadow(refName, color) {
      if (this.$refs[refName]) {
        //@ts-ignore
        this.$refs[refName].$el.querySelector(
          ".el-input__wrapper"
        ).style.boxShadow = `0 0 0 1px ${color} inset`;
      }
    },

    cancel() {
      this.dialogObj.isDialogVisible = false;
    },
    //提交

    //清空表单
    clearForm() {
      this.$refs.ruleFormRef.resetFields();
      this.$refs.drugValidateFormRef.resetFields();
      this.$refs.ruleFormRef11.resetFields();
      this.ruleForm.exaTime = this.getCurrentDate(); // 设置默认体检日期
      this.ruleForm11.nextYearExaTime = this.getNextYearDate(); //设置年检日期
    },
    submit() {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          this.$refs.drugValidateFormRef.validate((valid) => {
            if (valid) {
              this.$refs.ruleFormRef11.validate((valid) => {
                if (valid) {
                  const request = {
                    ...this.ruleForm,
                    ...this.ruleForm11,
                    ...this.drugValidateForm,
                  };
                  delete request.age;
                  http
                    .post("/health/saveOrUpdateHealth",request)
                    .then((res) => {
                      if (res.code === 200) {
                        ElMessage.success(res.message);
                        this.dialogObj.isDialogVisible = false;
                        this.clearForm();
                      }
                    });
                } else {
                  document.getElementById("healthGuide").scrollIntoView();
                }
              });
            } else {
              document.getElementById("part10").scrollIntoView();
            }
          });
        } else {
          document.getElementById("part1").scrollIntoView();
        }
      });
    },
    //弹窗关闭执行
    handleClose() {
      this.clearForm();
    },
    handleOpen() {
      this.assignBigObjectToForms(this.dialogObj.DialogDate);
    },

    //用药显示
    getShow() {
      this.tipshow = false;
    },
    parseDate(value) {
      if (/^\d{8}$/.test(value)) {
        // 如果是 yyyymmdd 格式
        const year = value.slice(0, 4);
        const month = value.slice(4, 6) - 1; // JavaScript中的月份是从0开始的
        const day = value.slice(6, 8);
        return new Date(year, month, day);
      } else if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
        // 如果是 yyyy-mm-dd 格式
        return new Date(value);
      }
      return NaN;
    },
    //处理时间日期
    getNextYearDate() {
      const date = new Date();
      const nextYear = date.getFullYear() + 1;
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${nextYear}-${month}-${day}`;
    },
    getCurrentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    //添加药品
    addDrug() {
      this.drugValidateForm.medicationListStatus = "有";
      if (this.drugValidateForm.medicationList.length < 50) {
        this.drugValidateForm.medicationList.push({
          medicationName: "",
          //  药品名称
          medicationTime: "",
          //  用药时间
          medicationType:"外院",
          frequencyDay: "",
          //  频次
          frequencyCount: "",
          //  频次
          dosagePerDay: "",
          //  剂量
          dosagePerCount: "",
          //  剂量单位
        });
      }
    },
    //移除药品
    moveDrug(item) {
      const index = this.drugValidateForm.medicationList.indexOf(item);
      if (index !== -1) {
        this.drugValidateForm.medicationList.splice(index, 1);
      }
    },

    //赋值
    assignBigObjectToForms(bigObject) {
      // this.clearForm();
      const forms = ["ruleForm", "drugValidateForm", "ruleForm11"];
      forms.forEach((form) => {
        Object.keys(this[form]).forEach((key) => {
          if (bigObject.hasOwnProperty(key)) {
            this[form][key] = bigObject[key];
          }
        });
      });
    },
  },
  computed: {
    getruleForm() {
      const { birthday, exaTime } = this.ruleForm;
      return { birthday, exaTime };
    },
  },
  watch: {
    dialogObj: {
      handler(newVal, oldVal) {
        // this.$nextTick(() => {
        //   this.assignBigObjectToForms(newVal.DialogDate);
        // });
      },
      deep: true, // 深度监听，确保对象内部属性的变化也能被监听到
    },
    getruleForm(val) {
      const { birthday, exaTime } = val;
      const i = this.ruleForm.birthday?.split("-")[0];
      if (this.dialogObj.isDialogVisible) {
        if (i) {
          this.ruleForm.age = new Date().getFullYear() + "" - i;
          if (this.ruleForm.age >= 65) {
          }
        }
        if (exaTime) {
          const exaDate = new Date(exaTime); // 将 exaTime 转换为 Date 对象
          exaDate.setFullYear(exaDate.getFullYear() + 1); // 将年份增加1
          this.ruleForm11.nextYearExaTime = exaDate.toISOString().split("T")[0]; // 格式化为 YYYY-MM-DD 字符串
        }
      }
    },
  },
  mounted() {
    this.ruleForm.exaTime = this.getCurrentDate(); // 设置默认体检日期
    this.ruleForm11.nextYearExaTime = this.getNextYearDate(); //设置年检日期
  },
};
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
  align-items: center;
}

.status-indicators {
  display: flex;
  width: 300px;
  justify-content: space-around;
}

.indicator {
  display: flex;
  align-items: center;
  margin-bottom: 8px; /* Adjust spacing between the two indicators */
}

.square {
  width: 20px;
  height: 20px;
  margin-right: 8px; /* Spacing between the square and the text */
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.text {
  font-size: 14px;
  color: #333;
}

.button-group {
  display: flex;
  gap: 10px;
}
.residents-container {
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content {
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  height: 500px;
}
/* .res-add-content::-webkit-scrollbar {
  display: none !important;
} */
.tip {
  font-size: 12px;
  color: red;
  z-index: 9;
  margin-left: 80px;
  display: block;
  height: 30px;
}
.ml20 {
  margin-left: 25px;
}
.flex {
  display: flex;
}
.el-radio.is-bordered {
  padding: 0 35px 0 35px;
  height: 32px;
}
.shell {
  width: 100%;
  border: 1px solid #ccc;
}
:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
:deep(.el-form-item__label) {
  font-size: 16px !important;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
  font-size: 16px !important;
}
:deep(.el-radio.el-radio--large .el-radio__label) {
  font-size: 16px !important;
}
:deep(.el-checkbox) {
  margin-right: 18px;
}
:deep(.el-input-group__append) {
  width: 20px;
}
/* :deep(.el-checkbox__inner) {
  border-radius: 50%;
} */
:deep(.el-dialog__header) {
  background-color: #016dff;
  margin: 0;
  height: 30px;
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
  font-size: 30px;
}
:deep(.el-form-item--large .el-form-item__content) {
  margin-left: 0 !important;
}
.title_box {
  width: 150px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #000;
  background-color: #ccc;
}
.iconBox {
  font-size: 25px;
  /* position: absolute;
  right: 168px;
  top: 68px; */
  cursor: pointer;
  margin-left: 15px;
}
.flexBox {
  display: flex;
}
</style>
